import React, {Component} from 'react';
import {
    StyleSheet,
    ScrollView,
    Text,
    View,
    ImageBackground,
} from 'react-native';
import {
    Button,
    Flex,
    WhiteSpace,
    WingBlank,
    List,
} from '@ant-design/react-native';

const Item = List.Item;
const Brief = Item.Brief;
export default class MyBankCard extends Component {
    constructor() {
        //调用基类的所有的初始化方法
        super();

        // 设置当前组件的属性
        this.state = {
            money: 50000,
            card: '54261542954125585',
            bank: '中国建设银行',
            arr: [
                {card: '54261542954125585', bank: '中国建设银行1'},
                {card: '54261542954125585', bank: '中国建设银行2'},
            ],
            //提现明细
            mx: [
                {
                    name: '银行卡提现',
                    ymoney: 3000,
                    datatime: '2020/5/1 15:01',
                    smoney: 50000,
                },
                {
                    name: '银行卡提现',
                    ymoney: 3000,
                    datatime: '2020/5/1 15:01',
                    smoney: 50000,
                },
            ],
        };
    }

    render() {
        return (
            <ScrollView style={{flex: 1}}>
                <WhiteSpace size="xl" />

                <Flex style={styles.textleft} direction="row" justify="center">
                    <Text>余额：{this.state.money}元</Text>
                </Flex>
                <WhiteSpace size="xl" />
                <WingBlank>
                    <Flex>
                        <Flex.Item style={styles.flexitem}>
                            <Button type="ghost">提现</Button>
                        </Flex.Item>
                        <Flex.Item style={styles.flexitem}>
                            <Button type="ghost"> 添加银行卡</Button>
                        </Flex.Item>
                    </Flex>
                </WingBlank>
                <WhiteSpace size="xl" />
                <List renderHeader={'我的银行卡'}>
                    {this.state.arr.map((item) => {
                        return (
                            <>
                                <Item extra={item.card} arrow="empty">
                                    {item.bank}
                                </Item>
                            </>
                        );
                    })}
                </List>
                <WhiteSpace size="xl" />
                <List style={styles.list} renderHeader={'提现明细'}>
                    {this.state.mx.map((item) => {
                        return (
                            <>
                                <WingBlank style={styles.wingblank}>
                                    <Flex justify="between">
                                        <Text>{item.name}</Text>
                                        <Text>{item.ymoney}</Text>
                                    </Flex>
                                    <Flex justify="between">
                                        <Text>{item.datatime}</Text>
                                        <Text>余额：{item.smoney}元</Text>
                                    </Flex>
                                </WingBlank>
                            </>
                        );
                    })}
                </List>
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    textleft: {
        fontSize: 20,
        fontWeight: 'bold',
    },
    flexitem: {
        paddingLeft: 4,
        paddingRight: 4,
    },
    list: {
        marginBottom: 50,
    },
    wingblank: {
        marginTop: 10,
        paddingBottom: 10,
        borderBottomWidth: 0.3,
    },
});
